Chip

Visión General del Componente Chip

El componente Chip en Emvi UI es una unidad compacta que permite representar elementos como entradas, selecciones, filtros o atributos. Combina texto, íconos y comportamiento interactivo en un diseño pequeño, legible y accesible.

Está pensado para interfaces con alto volumen de información visual, permitiendo acciones rápidas o navegación simplificada sin sobrecargar la UI. Es ideal para filtros dinámicos, preferencias de usuario, etiquetas seleccionables o sistemas de sugerencia.

Representando información

Los chips son ideales para representar pequeñas piezas de información en un formato compacto. Pueden mostrar entradas del usuario, como etiquetas o elementos seleccionados, facilitando la visualización y gestión de datos. Esto es especialmente útil en aplicaciones donde los usuarios necesitan agregar múltiples etiquetas o categorías a un elemento, manteniendo la interfaz ordenada y organizada.

Haciendo selecciones

Los chips permiten a los usuarios hacer selecciones rápida y eficientemente. Pueden usarse para filtrar contenido, como seleccionar categorías en una lista o alternar opciones. Su tamaño reducido y diseño claro los hacen fáciles de interactuar, proporcionando una forma fluida de refinar resultados de búsqueda o preferencias sin saturar la interfaz.

Activando acciones

Los chips también pueden usarse para activar acciones, añadiendo un elemento interactivo a tu diseño. Ya sea iniciando una búsqueda, aplicando un filtro o ejecutando un comando, los chips ofrecen una forma versátil de mejorar la interacción del usuario. Su diseño intuitivo asegura que los usuarios entiendan su función de un vistazo, haciendo tu aplicación más amigable. Nuestro UI KIT incluye componentes de chips personalizables que pueden adaptarse a diversas necesidades, asegurando tanto funcionalidad como atractivo estético.

Tipos y Variantes de Chip

Emvi UI ofrece varios tipos de chips, cada uno adaptado a una función específica dentro de la interfaz. Todos están disponibles en versiones SM y MD, y permiten integración con íconos, contadores y estados.

Tipos de Chips:
Chips de Entrada: Representan valores introducidos o seleccionados por el usuario (ej. intereses, etiquetas).
Chips de Filtro: Permiten activar o desactivar filtros. Pueden tener estado activo/inactivo.
Chips de Acción: Ejecutan una acción al hacer clic (ej. "Agregar", "Invitar").
Chips de Sugerencia: Propuestos automáticamente al usuario en base a contexto o historial.
Chips Dismissibles: Incluyen botón de cierre (ícono x) para eliminar la selección.

Estados, Interactividad y Accesibilidad

Los chips en Emvi UI están diseñados para ser totalmente interactivos, accesibles y compatibles con navegación táctil y por teclado. Cada variante incluye los siguientes estados:

Default: Visual neutro, con fondo claro y borde definido.
Hover: Aumenta el contraste del fondo o resalta el borde.
Focus: Muestra anillo visible para navegación con teclado.
Active / Selected: Indica que el chip está activado o marcado.
Disabled: Reduce opacidad y elimina interacción.
Dismissed (para chips eliminables): Activa animación de cierre o transición suave.

Cada chip admite atributos como role="button", aria-pressed, aria-selected o aria-label para cumplir con WCAG y facilitar su uso con lectores de pantalla.

Estilo, Estructura y Personalización

Los chips en Emvi UI están construidos a partir de tokens de diseño que permiten personalización precisa sin sacrificar la coherencia visual. Cada chip está compuesto por:

Texto central con tipografía adaptativa.
Fondo semitransparente o sólido según el contexto.
Borde y radio definidos por el sistema.
Ícono opcional (inicio, final o ambos).
Botón de cierre opcional (para chips eliminables).

Las variantes visuales pueden adaptarse fácilmente a temas claro/oscuro y se integran con los estilos globales definidos en Figma y Tailwind CSS.

Buenas Prácticas

Para garantizar que los chips se usen de manera efectiva y accesible en cualquier interfaz, se recomienda seguir estas pautas:

- Limitar el número de chips visibles en pantalla para evitar sobrecarga cognitiva.
- Utilizar chips solo cuando representen entradas, filtros o acciones concisas.
- Asegurar suficiente contraste entre fondo y texto para mantener legibilidad.
- No abusar de los chips eliminables; ofrecer solo cuando el usuario tiene control sobre las opciones.
- Incluir íconos solo si agregan contexto o claridad funcional.

Estas prácticas permiten una experiencia más limpia, clara y centrada en el usuario.